<template>
  <div>
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="35%">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="新密码" prop="iuiPassword">
          <el-popover placement="right" trigger="focus" width="240">
            <p v-show="passwordIndex == -1">
              请至少输入6个字符。请不要使用容易被猜到的密码。
            </p>

            <div v-show="passwordIndex == 0">
              <p style="font-size: 16px; color: #e47470">强度：太短</p>
              <el-progress :percentage="50" status="exception"></el-progress>
              <p style="padding-top: 5px">
                请至少输入6个字符。请不要使用容易被猜到的密码。
              </p>
            </div>

            <div v-show="passwordIndex == 1 || passwordIndex == 2">
              <p style="font-size: 16px; color: #e47470">强度：弱</p>
              <el-progress :percentage="50" status="exception"></el-progress>
              <p style="padding-top: 5px">
                请至少输入6个字符。请不要使用容易被猜到的密码。
              </p>
            </div>

            <div v-show="passwordIndex >= 3">
              <p style="font-size: 16px; color: #7ebf50">强度：安全</p>
              <el-progress :percentage="100" status="success"></el-progress>
              <p style="padding-top: 5px">
                请至少输入6个字符。请不要使用容易被猜到的密码。
              </p>
            </div>
            <el-input
              slot="reference"
              type="password"
              v-model="ruleForm.iuiPassword"
              maxlength="16"
              show-password
            ></el-input>
          </el-popover>
        </el-form-item>
        <el-form-item label="确认新密码" prop="checkPass">
          <el-input
            type="password"
            v-model="ruleForm.checkPass"
            autocomplete="off"
            show-password
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">取 消</el-button>
        <el-button @click="submitForm('ruleForm')" type="primary"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { changeUserInfo } from "@/request/api/user";
import { aesEncrypt } from "@/utils/crypto.js";
import rulesUtil from "@/utils/rules"
export default {
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.iuiPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        iuiId: "",
        iuiPassword: "",
        checkPass: "",
      },
      passwordIndex: -1,
      rules: {
        iuiPassword: [
          { required: true, validator: rulesUtil.FormValidate.Form().validatePsdReg, trigger: "blur" },
        ],
        checkPass: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
      },
      dialogFormVisible: false,
    };
  },
  methods: {
    open(userId) {
      this.ruleForm.iuiId=userId
      this.dialogFormVisible = true;
    },
    submitForm(formName) {
      
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var cryptoPwd = aesEncrypt(this.ruleForm.iuiPassword);
          let params={
            iuiId: this.ruleForm.iuiId,
            iuiPassword: cryptoPwd,
            checkPass: this.ruleForm.checkPass,
          }
          changeUserInfo(params).then((res) => {
            if (res.data.status === "SUCCESS") {
              this.$message({
                message: "修改成功，请使用新密码进行登录！",
                type: "success",
              });
              setTimeout(() => {
                this.$router.push("/login");
              }, 1200);
            } else {
              this.$message.error(res.data.message);
            }
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName){
      this.$refs[formName].resetFields();
      this.dialogFormVisible = false;
    },
    checkPassWord(value) {
      // 0： 表示第一个级别 1：表示第二个级别 2：表示第三个级别
      // 3： 表示第四个级别 4：表示第五个级别
      var modes = 0;
      if (value.length < 6) {
        //最初级别
        return modes;
      }
      if (/\d/.test(value)) {
        //如果用户输入的密码 包含了数字
        modes++;
      }
      if (/[a-z]/.test(value)) {
        //如果用户输入的密码 包含了小写的a到z
        modes++;
      }
      if (/[A-Z]/.test(value)) {
        //如果用户输入的密码 包含了大写的A到Z
        modes++;
      }
      if (/\W/.test(value)) {
        //如果是非数字 字母 下划线
        modes++;
      }
      switch (modes) {
        case 1:
          return 1;
          // eslint-disable-next-line no-unreachable
          break;
        case 2:
          return 2;
          break ;
        case 3:
          return 3;
          break;
        case 4:
          return 4;
          break;
      }
    },
  },
  watch: {
    "ruleForm.iuiPassword": {
      handler: function (val, oldVal) {
        if (val.length == "") {
          this.passwordIndex = -1;
        } else {
          this.passwordIndex = this.checkPassWord(val);
        }
      },
    },
  },
};
</script>
